{% extends '@Backend/layout.html.twig' %}

{% block web_title %}新增文章{% endblock %}

{% block style %}
    <style>
        .table td{
            vertical-align: middle !important;
            text-align: center;
        }
    </style>
{% endblock %}

{% block body %}
    <section class="content">
        <div class="box box-info">
            <div class="box-header">
                <h3 class="box-title pull-left">文章列表</h3>

                <form class="pull-right" action="{{ path('backend_article_list') }}">
                    <input name="n" value="{{ app.request.get('n') | default('') }}" type="text" class="form-control pull-left" style="width: 65%;margin-right: 15px;" placeholder="请输入搜索内容">
                    <button class="btn btn-primary pull-left">搜索</button>
                </form>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
                <table class="table table-bordered table-striped">
                    <thead>
                    <tr>
                        <th width="15%">文章标题</th>
                        <th width="20%">展示图</th>
                        <th width="20%">文章简介</th>
                        <th width="15%">文章分类名称</th>
                        <th width="15%">创建时间</th>
                        <th width="15%">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% if pagination.getTotalItemCount != 0 %}
                        {% for article in pagination %}
                            <tr>
                                <td>{{ article.title }}</td>
                                <td>
                                    <img src="{{ asset(article.thumb) }}" width="100" title="点击放大" class="ad-thumb" alt="{{ article.title }}">
                                </td>
                                <td>{{ article.introduction }}</td>
                                <td>{{ article.articleClassifyName }}</td>
                                <td>{{ article.createdAt.date | slice(0, 16) }}</td>
                                <td>
                                    <a href="{{ path('backend_article_opera',{id: article.id}) }}">编辑</a>&nbsp;&nbsp;
                                    <a class="ad-remove" data-id="{{ article.id }}">删除</a>&nbsp;&nbsp;
                                </td>
                            </tr>
                        {% endfor %}
                    {% else %}
                        <tr>
                            <td colspan="6">暂无数据</td>
                        </tr>
                    {% endif %}
                    </tbody>
                </table>

                <div class="pagination pull-right">
                    {{ knp_pagination_render(pagination) }}
                </div>

            </div>
            <!-- /.box-body -->
        </div>
    </section>

    <div class="theme-popover-mask"></div>

    <div class="theme-popover">
        <img src="" class="popover-big-img" alt="">
    </div>
{% endblock %}

{% block js %}
    <script>
        $(function() {
            navHighLight('1', '1');

            // 删除
            $('.ad-remove').on('click', function() {
                var _this = $(this), id = _this.data('id');

                layer.confirm('确定删除吗？', function(index) {
                    layer.close(index);

                    $.ajax({
                        url: '{{ path('api_article_del') }}',
                        data: {id: id},
                        success: function(res) {
                            if (res.errorCode == 0) {
                                layer.msg(res.message);
                                _this.parents('tr').fadeOut("fast", function (){
                                    _this.parents('tr').remove();
                                });
                            }
                        }
                    })

                });
            });

        })
    </script>
{% endblock %}
